<script setup lang="ts">
  import Pagination from '@/components/Pagination/index.vue'
  import DateRange from '@/components/DateRange.vue'
  import { Search } from '@element-plus/icons-vue'
  import { onMounted, ref } from 'vue'
  import sendCountList from '../service/sendCountList'
  import { GetSendCountListParam } from '../types'
  import { ElMessage } from 'element-plus'

  // 筛选条件
  const filter = ref<GetSendCountListParam>({
    sendStartTime: '',
    sendEndTime: '',
    limit: 50,
    page: 1,
  })

  const { totalList, sendSmsCountList, getSendSmsCountListLoading, getSendSmsCountListFn } =
    sendCountList

  // 分页组件实例
  const paginationRef = ref(null)

  // 开始日期是都大于结束日期
  const isStartDateGreaterThanEndDate = ref(false)

  // 日期更新事件
  const handleChangeDate = (param: {
    startDate: string
    endDate: string
    isStartDateGreaterThanEndDate: boolean
  }) => {
    if (param.isStartDateGreaterThanEndDate) {
      ElMessage({
        type: 'error',
        message: '开始日期不能大于结束日期',
        duration: 5000,
        plain: true,
        showClose: true,
      })
      return
    }
    filter.value.sendStartTime = param.startDate
    filter.value.sendEndTime = param.endDate
    isStartDateGreaterThanEndDate.value = param.isStartDateGreaterThanEndDate
    getList()
  }

  // 搜索事件
  const getList = async (val=true) => {
    if (isStartDateGreaterThanEndDate.value) {
      ElMessage({
        type: 'error',
        message: '开始日期不能大于结束日期',
        duration: 5000,
        plain: true,
        showClose: true,
      })
      return
    }

    if (paginationRef.value) {
      if(val)paginationRef.value.setPage()
      filter.value.page = paginationRef.value.current
      filter.value.limit = paginationRef.value.size
    }
    await getSendSmsCountListFn(filter.value)
  }

  onMounted(() => {
    getList()
  })

  defineExpose({
    getList,
  })
</script>

<template>
  <div class="second_count_statistics">
    <div class="search">
      <DateRange @change="handleChangeDate" />
      <HButton type="primary" @click="getList">
        <el-icon>
          <Search />
        </el-icon>
        搜索
      </HButton>
    </div>
    <div class="table">
      <el-table
        border
        stripe
        resizable
        :data="sendSmsCountList"
        v-loading="getSendSmsCountListLoading"
        height="100%"
      >
        <!--序号-->
        <el-table-column type="index" label="序号" width="50" fixed="left" :align="'center'" />

        <!--发送时间-->
        <el-table-column show-overflow-tooltip prop="sendTime" label="发送时间" />

        <!--发送总数-->
        <el-table-column show-overflow-tooltip prop="sendTotalCount" label="发送总数" />

        <!--发送成功数-->
        <el-table-column show-overflow-tooltip prop="sendSuccessCount" label="发送成功数" />

        <!--发送未成功数-->
        <el-table-column show-overflow-tooltip prop="sendFailtCount" label="发送未成功数" />

        <!--发送成功率-->
        <el-table-column show-overflow-tooltip prop="sendSuccessRate" label="发送成功率" />
      </el-table>
    </div>
    <div class="pagination">
      <Pagination
        :list_total="Number(totalList)"
        ref="paginationRef"
        @size-change="getList"
        @current-change="getList(false)"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
  .second_count_statistics {
    height: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 12px;

    .search {
      display: flex;
      column-gap: 5px;
      justify-content: flex-end;
    }

    .table {
      max-height: calc(100% - 80px);
    }

    .pagination {
      display: flex;
      justify-content: flex-end;
    }
  }
</style>
